<script setup>
import { ref } from 'vue'
import { createPopper } from '@popperjs/core'
const props=defineProps({
  position:{
    type:String,
    default:'left'
  }
})
const buttonRef = ref()
const contentRef = ref()
let popperInstance = null

const isVisible = ref(false)
let timeout = null
const openContent = () => { 
  if (timeout) {
    clearTimeout(timeout)
  }
  isVisible.value = true
  if (contentRef.value && buttonRef.value) {
    popperInstance = createPopper(buttonRef.value, contentRef.value, {
      placement: props.position,
    })
  }
}

const closeContent = () => {
  timeout = setTimeout(() => {
    popperInstance?.destroy()
    isVisible.value = false
  }, 500)
}

</script>

<template>
  <div
    class="inline-block relative"
    ref="buttonRef"
    @mouseenter="openContent"
    @mouseleave="closeContent"
  >
    <div>
      <slot> </slot>
    </div>

    <div
      v-show="isVisible"
      ref="contentRef"
      class="absolute duration-300 inline-block rounded-md"
    >
      <slot name="content"> </slot>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
